<template>
  <div>
    <el-tabs v-model="activeTab" type="border-card" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="签约信息" name="签约信息">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名：" label-class-name="my-label"
            content-class-name="my-content">123</el-descriptions-item>
          <el-descriptions-item label="身份证号">123</el-descriptions-item>
          <el-descriptions-item label="性别">男</el-descriptions-item>
          <el-descriptions-item label="年龄"><el-tag size="small">12</el-tag></el-descriptions-item>
          <el-descriptions-item label="联系方式">110</el-descriptions-item>
          <el-descriptions-item label="是否户主">是</el-descriptions-item>
          <el-descriptions-item span="2" label="现住址" :content-style="{ 'text-align': 'right' }">河南省洛阳</el-descriptions-item>
          <el-descriptions-item span="2" label="户籍地址" :content-style="{ 'text-align': 'right' }">河南省洛阳</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="服务包" name="服务包">
        <div class="info_content">
          <div>
            <div style="margin-bottom: 24px;">
              <div class="table_head">
                <div class="head_left">
                  <div class="head_title">0～36个月儿童中医药健康管理服务包</div>
                  <div class="head_btn">
                    <div class="btn_item effect"> 已生效 </div>
                    <div class="btn_item finished"> 已完成 </div>
                  </div>
                </div>
                <div class="head_right"><span>有效期：2024-08-11至2025-08-10</span></div>
              </div>
              <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="date" label="服务项" width="180" />
                <el-table-column prop="name" label="服务内容" width="180" />
                <el-table-column prop="address" label="服务进程" />
                <el-table-column prop="edit" label="操作">
                    <template v-slot="scope">
                        <el-button>详情</el-button>
                    </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';
const activeTab = ref('签约信息');
const tableData = ref([{
  date:'2022-2-2',
  name:'123',
  address:'000'
}]);
const handleClick = (tab, event) => {
  // console.log(tab, event)
}
</script>

<style scoped>
.table_head {
  height: 55px;
  background: #ffffff;
  border-radius: 2px 2px 0 0;
  border: 1px solid #eeeeee;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table_head .head_left {
  display: flex;
  align-items: center;
}

.table_head .head_right {
  font-size: 14px;
  font-weight: 400;
  color: #999;
  margin-right: 18px;
}

.table_head .head_left .head_title {
  margin-left: 16px;
}

.table_head .head_left .head_btn {
  margin: 0 16px 0 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.table_head .head_left .head_btn .btn_item {
  width: 65px;
  height: 24px;
  border-radius: 2px;
  text-align: center;
  line-height: 24px;
  margin: 0 4px;
}

.effect {
  background: #36bfa8;
  color: #fff;
}

.finished {
  color: #fff;
  background: #73d13c;
}
</style>
